<!-- 待处理日程 -->
<template>
  <view class="processingSchedule">
    <div class="nav"></div>
    <div class="one">
      <u-icon name="arrow-left" @click="fan"></u-icon>
      <div class="navtop">
        <div
          class="li"
          v-for="(item, index) in list"
          :key="index"
          @click="add(index)"
          :class="myindex == index ? 'active' : ''"
        >
          {{ item }}
        </div>
      </div>
      <div class="right">
        <image src="../../../static/diImage/漏斗图.png" mode=""></image>
        <div class="p">
			<div class="aa" @click="open">筛选</div>
			<u-popup :show="show" mode="right"  >
				<view class="alert">
					<div class="navs"></div>
					<div class="ones">
						<div class="pq">数据筛选</div>
						<div class="ps" @click="close">×</div>
					</div>
					<div class="twos">
						<div class="box">日程状态</div>
						<div class="ul">
							<div class="lis" v-for="item,index in arr" @click="top(index)" :class="arrIndex==index?'active':''" :key="index">{{item}}</div>
						</div>
					</div>
					<div class="twos">
						<div class="box">紧要程度</div>
						<div class="ul">
							<div class="lis" v-for="item,index in arr1" @click="bottom(index)" :class="onIndex==index?'active':''" :key="index">{{item}}</div>
						</div>
					</div>
					<div class="twos">
						<div class="box">关键词查询</div>
						<input type="text"  placeholder="输入日程关键词"/>
					</div>
					<div class="twos" v-show='puisne'>
						<div class="box">参与人员</div>
						<div class="list">
							<div class="ll">
								<image src="../../../static/tabbar/个人.png" mode=""></image>
								<div class="p">赵小刚</div>
							</div>
							<div class="ll">
								<image src="../../../static/tabbar/个人.png" mode=""></image>
								<div class="p">周小明</div>
							</div>
							<div class="ll">
								<image src="../../../static/tabbar/个人.png" mode=""></image>
								<div class="p">郭小涛</div>
							</div>
							<div class="ll">
								<div class="jia">+</div>
								<div class="p">更多</div>
							</div>
						</div>
					</div>
					<div class="threes">
						<div class="left" @click="chongzhi">重置</div>
						<div class="right" @click="que">确定</div>
					</div>
				</view>
			</u-popup>
		</div>
      </div>
    </div>
    <uni-calendar
      class="uni-calendar--hook"
      :selected="info.selected"
      :showMonth="false"
      @change="change"
      @monthSwitch="monthSwitch"
    />
    <div
      class="two"
      style="
        height: 20rpx;
        background-color: #f6f6f6;
        border-top: 1rpx solid gainsboro;
      "
    ></div>
    <div class="three">
      <Puisne v-show="puisne"></Puisne>
      <Wo v-show="wo"></Wo>
    </div>
  </view>
</template>

<script>
import Puisne from "../puisne/puisne.vue";
import Wo from "../wo/wo.vue";

function getDate(date, AddDayCount = 0) {
  if (!date) {
    date = new Date();
  }
  if (typeof date !== "object") {
    date = date.replace(/-/g, "/");
  }
  const dd = new Date(date);

  dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

  const y = dd.getFullYear();
  const m =
    dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
  const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
  return {
    fullDate: y + "-" + m + "-" + d,
    year: y,
    month: m,
    date: d,
    day: dd.getDay(),
  };
}
export default {
  components: { Wo, Puisne },
  data() {
    return {
      list: ["我的日程", "下属日程"],
	  arr:['全部','进行中','未开始','已完成','未完成','已超时','已取消'],
	  arrIndex:0,
	  arr1:['全部','重要','紧急','普通','重要且紧急',],
	  onIndex:0,
      myindex: 0,
      wo: true,
      puisne: false,
	  show:false,
      showCalendar: false,
      info: {
        lunar: true,
        range: true,
        insert: false,
        selected: [],
      },
    };
  },
  onReady() {
    this.$nextTick(() => {
      this.showCalendar = true;
    });
    // TODO 模拟请求异步同步数据
    setTimeout(() => {
      this.info.date = getDate(new Date(), -30).fullDate;
      this.info.startDate = getDate(new Date(), -60).fullDate;
      this.info.endDate = getDate(new Date(), 30).fullDate;
      this.info.selected = [
        {
          date: getDate(new Date(), -3).fullDate,
          info: "",
        },
        {
          date: getDate(new Date(), -2).fullDate,
          info: "",
          data: {
            custom: "自定义信息",
            name: "自定义消息头",
          },
        },
        {
          date: getDate(new Date(), -1).fullDate,
          info: "",
        },
      ];
    }, 2000);
  },
  components: { Wo, Puisne },
  methods: {
    // 点击切换高亮
    add(index) {
      this.myindex = index;

      if (this.myindex == 0) {
        this.wo = true;
        this.puisne = false;
      }
      if (this.myindex == 1) {
        this.wo = false;
        this.puisne = true;
      }
    },
    // 返回上一页
    fan() {
      uni.navigateBack();
    },
    change(e) {
      console.log("change 返回:", e);
      // 模拟动态打卡
      if (this.info.selected.length > 5) return;
      this.info.selected.push({
        date: e.fulldate,
        info: "打卡",
      });
    },
    confirm(e) {
      console.log("confirm 返回:", e);
    },
    monthSwitch(e) {
      console.log("monthSwitchs 返回:", e);
    },

    // 弹窗
    open() {
		this.show = true
    },
    close() {
      this.show = false;
    },
	// 弹窗切换高亮
	top(index){
		this.arrIndex=index
	},
	bottom(index){
		this.onIndex=index
	},
	// 重置
	chongzhi(){
		this.arrIndex=0
		this.onIndex=0
	},
	// 确认
	que(){
		this.show = false;
	}
  },
};
</script>

<style lang="scss">
.processingSchedule {
  width: 100%;
  height: 100vh;
  .nav {
    height: 60rpx;
  }
  .one {
    padding: 0 20rpx;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .navtop {
      display: flex;
      .li {
        padding: 10rpx 40rpx;
        border: 1rpx solid #3478f7;
        font-size: 24rpx;
        color: #3478f7;
      }
      .active {
        background-color: #3478f7;
        color: white;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .p {
        color: #0079fe;
      }
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}
.calendar-button {
  flex: 1;
  font-weight: bold;
  font-size: 32rpx;
}
.alert{
	.navs{
		height: 30rpx;
	}
	.ones{
		width: 650rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		font-weight: 600;
		border-bottom: 1px solid gainsboro;
		.pq{
			color: black;
		}
		.ps{
			color: gainsboro;
			font-size: 60rpx;
		}
	}
	.twos{
		width: 650rpx;
		color: #737373;
		padding: 0 20rpx;
		margin-top: 10rpx;
		.box{
			height: 80rpx;
			line-height: 80rpx;
		}
		.ul{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.lis{
			width: 180rpx;
			height: 80rpx;
			margin-top: 10rpx;
			border: 1rpx solid #737373;
			display: flex;
			margin-right: 22rpx;
			justify-content: center;
			align-items: center;
		}
		input{
			border: 1rpx solid #737373;
			height: 60rpx;
			padding:  0 20rpx;
		}
		.active{
			color: #0079fe;
			border: 1rpx solid #0079fe;
		}
		.list{
			width: 650rpx;
			display: flex;
			justify-content: space-between;
			.ll{
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.p{
					color: black;
				}
				image{
					width: 60rpx;
					height: 60rpx;
				}
				.jia{
					width: 60rpx;
					height: 60rpx;
					border: 4rpx solid gainsboro;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	.threes{
		width: 650rpx;
		height: 100rpx;
		position: fixed;
		left: 13.5%;
		top: 93%;
		display: flex;
		z-index: 33;
		background-color: white;
		.left{
			width: 50%;
			height: 100%;
			border: 1rpx solid gainsboro;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #0079fe;
		}
		.right{
			width: 50%;
			height: 100%;
			background-color: #0079fe;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
		}
	}
}

</style>
